<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta charset="UTF-8">
    <meta name="author" content="Ambit-Tsai, ambit_tsai@qq.com">
    <title>BS-Transfer</title>
    <link href="libs/bootstrap-v3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="libs/bootstrap-table-v1.16.0/bootstrap-table.min.css" rel="stylesheet">
</head>
<body>
    <style type="text/css">
        html, body {
            height: 100%;
        }
        .wrapper {
            height: 100%;
            padding: 32px;
        }
    </style>


    <div class="wrapper">
        <div id="transfer"></div>
    </div>


    <script src="libs/jquery-v3.4.1/jquery.min.js" type="text/javascript"></script>
    <script src="libs/bootstrap-v3.4.1/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="libs/bootstrap-table-v1.16.0/bootstrap-table.min.js" type="text/javascript"></script>
    <script src="bs-transfer.dev.js" type="text/javascript"></script>
    <script type="text/javascript">
        var transfer = new BsTransfer({
            mountPoint: '#transfer',
            tableOptions: {
                data: [
                    {f1: 1, f2: 2, f3: 3},
                    {f1: 4, f2: 5, f3: 6},
                    {f1: 7, f2: 8, f3: 9},
                ],
                columns: [
                    {field: 'f1', title: 'f1'},
                    {field: 'f2', title: 'f2'},
                    {field: 'f3', title: 'f3'},
                ],
            },
            toUpper: _ => console.log('toUpper'),
            toLower: _ => console.log('toLower')
        });
    </script>
</body>
</html>